import React from 'react'
import { connect } from 'react-redux'
import classnames from 'classnames'
import { NavLink } from 'react-router-dom'

const mapStateToProps = (state) => {
  return {
    userInfo: state.app.userInfo,
    currentGroup: state.group.currentGroup,
  }
}

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openModal: msg => dispatch(global.allActions.groupActions.openModal(msg))
  }
}

class List extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      applyList: []
    }
  }
  
  public componentDidMount() {
    this.queryList()
  }

  queryList() {
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}`
    const opt = { method: 'GET' }
    const query = {crowdId: this.props.currentGroup.id, offset: 0, limit: 50}
    fetchJson(url, opt, query).then(data => {
      console.log(data);
      if (data.result) {
        return
      }
      this.setState({applyList: data.data.dataList})
    })
  }

  agree(apply, applyStatus) {
    console.log(apply, applyStatus);
    const url = `${config.pre}/crowd/relation/${Cookies.get('areaCode')}`
    const body = {id: apply.id, applyStatus}
    const opt = { method: 'PUT', body: JSON.stringify(body) }
    fetchJson(url, opt).then(data => {
      console.log(data);
      this.props.openModal(data.message)
      this.queryList()
    })
  }

  public render() {
    // const {close, userInfo} = this.props
    const {applyList} = this.state
    return <div className="view-page group-view">
      <div style={{height: '.1rem'}}>
      </div>
      <div className="inner-body v-scroll">
        {
          applyList.map((apply, index) => {
            return <div key={index} className="group-item pure-g member-list-item">
              <div className="pure-u-5-24 vh-center">
                <img className="group-new-header" src={apply.headUrl} alt="群头像" />
              </div>
              <div className="pure-u-15-24 h-center column">
                <p className="group-name orange">{apply.nickname}</p>
                <p className="group-number">ID: {apply.lftId}</p>
              </div>
              <div className="pure-u-4-24 apply-operate full-height">
                <img onClick={this.agree.bind(this, apply, 1)} src="img/groupNew/agree.png?v=20181201" alt=""/>
                <img onClick={this.agree.bind(this, apply, 2)} src="img/groupNew/reject.png?v=20181201" alt=""/>            
              </div>
            </div>
          })
        }
        {
          applyList.length === 0 ? <div className="apply-tip">目前没有玩家申请</div> : null
        }
      </div>
      <div className="inner-bottom">
          <div className="text vh-center"><span>申请列表</span></div>
          <NavLink to="/Inner"><img className="back" src="img/app/back.png?v=20181201" alt="" /></NavLink>
      </div>
    </div>
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(List)